<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus';
import { ref } from 'vue'
// 搜索
const input = ref('')



//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
}

//获取正常设备数据
import { deviceNormalListService } from '@/api/SiteMana.js'
const deviceNormal = ref('')
const name = ref([])
const deviceNormalList = async () => {
    let result = await deviceNormalListService();
    deviceNormal.value = result.data
    name.value = [];
    // 遍历从后端获取的数据
    deviceNormal.value.forEach(item => {
        // 将后端数据中的 name 和 value 添加到 datas 中
        name.value.push({
            name: item.name2
        })
    })

}
deviceNormalList()




// 获取故障设备数据
import { deviceWarnListService } from '@/api/SiteMana.js'
const deviceWarnList = ref('')
const deviceWarnService = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value
    }
    let result = await deviceWarnListService(params);
    total.value = result.data.total
    deviceWarnList.value = result.data.items
    // console.log(deviceWarnList.value);
}
deviceWarnService()



// 修改设备故障状态
//清空数据
const clearformrData = () => {
    form.name2 = '';
    form.warnProblem = '';
    form.warnLevel = '';
}
const showDialog = () => {
    clearformrData();    // 清空表单数据
    deviceNormalList(); // 获取最新的正常设备数据
    dialogVisible.value = true; // 显示模态框
};

import { deviceWarnUpdateService } from '@/api/SiteMana.js'
const deviceWarnUpdate = async () => {
    let result = await deviceWarnUpdateService(form)
    ElMessage.success(result.msg ? result.msg : '添加故障设备成功')
    deviceWarnService()
}
// 添加故障设备模态框
import { reactive } from 'vue'
const dialogVisible = ref(false)
const form = reactive({
    name2: '',
    warnProblem: '',
    warnLevel: ''
})
const onSubmit = () => {
    console.log(form)
    deviceWarnUpdate()
}




// 设备故障处理
import { deviceStraUpdateService } from '@/api/SiteMana.js'
const deviceStraUpdate = async () => {
    let result = await deviceStraUpdateService(form2)
    ElMessage.success(result.msg ? result.msg : '故障设备处理成功')
    deviceWarnService()
}






// 策略模态框
const dialogVisible2 = ref(false)
const form2 = reactive({
    name2: '',
    straWay: ''
})
const handleEdit = (row) => {
    console.log(row);
    // 将点击行的 name2 传递给对话框的 form2
    form2.name2 = row.name2;
    // 打开对话框
    dialogVisible2.value = true;
}

const onSubmit2 = () => {
    console.log(form2);
    deviceStraUpdate()
}

</script>
<template>


    <!-- 策略模态框 -->
    <el-dialog v-model="dialogVisible2" title="站点信息" width="600" :before-close="handleClose">
        <el-form :model="form2" label-width="auto" style="max-width: 600px;margin-top: 20px;">
            <el-form-item label="告警设备名称">
                <el-input v-model="form2.name2" readonly />
            </el-form-item>
            <el-form-item label="处理策略">
                <el-input v-model="form2.straWay" />
            </el-form-item>
            <el-form-item style="margin-left: 400px;">
                <el-button type="primary" @click="onSubmit2(); dialogVisible2 = false">提交</el-button>
                <el-button @click="dialogVisible2 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 故障设备列表 -->
    <el-card class="page-container">
        <!-- 设备列表 -->
        <el-icon style="margin-bottom: 20px;" :size="20" @click="showDialog()">
            <Plus />
        </el-icon>
        <el-table :data="deviceWarnList" style="width: 100%">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="告警设备名称" prop="name2"> </el-table-column>
            <el-table-column label="告警问题" prop="warnProblem"></el-table-column>
            <el-table-column label="告警级别" prop="warnLevel">
                <template #default="{ row }">
                    <span v-if="row.warnLevel === '严重'" style="color: #ed3f35;font-weight: 800;">严重</span>
                    <span v-if="row.warnLevel === '中等'" style="color: #eacf19;font-weight: 800;">中等</span>
                    <span v-if="row.warnLevel === '轻微'" style="color: #00ff00;font-weight: 800;">轻微</span>
                </template>
            </el-table-column>
            <el-table-column label="告警时间" prop="warnTime"></el-table-column>
            <el-table-column label="操作" width="300">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="handleEdit(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" layout="total, prev, pager, next"
            background :total="total" @size-change="onSizeChange" @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end" />
    </el-card>

    <!-- 添加故障设备模态框 -->
    <el-dialog v-model="dialogVisible" title="告警设备信息" width="600" :before-close="handleClose">
        <el-form :model="form" label-width="auto" style="max-width: 600px;margin-top: 20px;">
            <el-form-item label="告警设备名称">
                <el-radio-group v-model="form.name2">
                    <el-radio v-for="n in name" :value=n.name style="margin-right: 10px;">{{ n.name }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="告警问题">
                <el-input v-model="form.warnProblem" />
            </el-form-item>
            <el-form-item label="告警级别">
                <el-radio-group v-model="form.warnLevel">
                    <el-radio value="轻微">轻微</el-radio>
                    <el-radio value="中等">中等</el-radio>
                    <el-radio value="严重">严重</el-radio>
                </el-radio-group>
            </el-form-item>


            <el-form-item style="margin-left: 400px;">
                <el-button type="primary" @click="dialogVisible = false; onSubmit()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<style lang="scss" scoped>
h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 400;
}

.page-container {
    min-height: 100%;
    box-sizing: border-box;

}
</style>